<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/baloon.css" rel="stylesheet">
        <script src="../js/jquery-1.10.1.js"></script>
        <link href="../css/blitzer/jquery-ui-1.10.3.custom.css" rel="stylesheet">      
        <script src="../js/jquery-ui-1.10.3.custom.js"></script>

        <script>
            $(function() {
                $(document).tooltip({
                    position: {
                        my: "center bottom-20",
                        at: "center top",
                        using: function(position, feedback) {
                            $(this).css(position);
                            $("<div>")
                                    .addClass("arrow")
                                    .addClass(feedback.vertical)
                                    .addClass(feedback.horizontal)
                                    .appendTo(this);
                        }
                    }
                });

                $(".area").click(function() {
                    var caminho = $(this).attr("id");
                    $('#explicacao').bPopup({
                        content: 'iframe',
                        contentContainer: '.content',
                        loadUrl: 'Pecas/' + caminho + '.html' //Uses jQuery.load()
                    });
                });

                $("#howork").click(function() {
                    $('#explicacao').bPopup({
                        content: 'iframe',
                        contentContainer: '.content',
                        loadUrl: 'Pecas/comofunciona.html' //Uses jQuery.load()
                    });
                });
            });

        </script>
    </head>
    <body>

        <table border=1 cellspacing=0 cellpadding=0>
            <tr>
                <td>
                    <img src="Pecas/img/cooler.JPG" alt=""/>
                </td>
                <td rowspan=6>
                    <div id="mobo">
                        <div class="area" id="processador" title="Este é o processador"></div>
                        <div class="area" id="chipsetnorte" title="Este é o chipsetNorte"></div>
                        <div class="area" id="pciexpress" title="Este é o PCI-E"></div>
                        <div class="area" id="bateria" title="Esta é a bateria"></div>
                        <!-- <div class="area" id="ide-hd" title="IDE - HD"></div>-->
                        <!-- <div class="area" id="ide-cdrom" title="IDE - CDROM"></div>-->
                        <div class="area" id="sata" title="Este é o SATA"></div>
                        <div class="area" id="memoria" title="Este é o Memoria"></div>
                        <div class="area" id="pci" title="Este é o PCI"></div>
                        <div class="area" id="chipsetsul" title="Este é o Chipset Sul"></div>
                        <div class="area" id="ide" title="IDE"></div>
                        <div class="area" id="fonte" title="Aqui se conecta a fonte"></div>
                        <!-- <div class="area" id="chipsetsul" title="Este é o Chipset Sul"></div>-->
                    </div>
                </td>
                <td>  
                    <img src="Pecas/img/driveCD.jpg" alt=""/>
                </td>
            </tr>
            <tr>
                <td>
                    <img src="Pecas/img/hd.png" alt=""/>
                </td>
                <td>
                    <img src="Pecas/img/placa de video2.jpg" alt=""/>
                </td>
            </tr>
            <tr>
                <td>
                    <img src="Pecas/img/monitor.jpg" alt=""/>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                </td>
            </tr>
        </table>
    </body>
</html>
